<template>
	<view>
		<view>
			<headerView ref="headerView"></headerView>
			<adView ref="adView"></adView>
			<view class="mainContent">
				<view class="searchContent">
					<view style="display: flex;flex-direction: row;">
						<view class="searchLable">推广量/月：</view>
						<text @click="showSearchTag1(0)"
							:class="[{'searchTagClick':tag1 == 0},{'searchTag':tag1 != 0}]">不限</text>
						<text @click="showSearchTag1(1)"
							:class="[{'searchTagClick':tag1 == 1},{'searchTag':tag1 != 1}]">1-500</text>
						<text @click="showSearchTag1(2)"
							:class="[{'searchTagClick':tag1 == 2},{'searchTag':tag1 != 2}]">500-3000</text>
						<text @click="showSearchTag1(3)"
							:class="[{'searchTagClick':tag1 == 3},{'searchTag':tag1 != 3}]">3000-8000</text>
						<text @click="showSearchTag1(4)"
							:class="[{'searchTagClick':tag1 == 4},{'searchTag':tag1 != 4}]">8000以上</text>
					</view>
					<view style="display: flex;flex-direction: row;margin-top: 10px;">
						<view class="searchLable">公司类型：</view>
						<text @click="showSearchTag2(0)"
							:class="[{'searchTagClick':tag2 == 0},{'searchTag':tag2 != 0}]">不限</text>
						<text @click="showSearchTag2(1)"
							:class="[{'searchTagClick':tag2 == 1},{'searchTag':tag2 != 1}]">个人</text>
						<text @click="showSearchTag2(2)"
							:class="[{'searchTagClick':tag2 == 2},{'searchTag':tag2 != 2}]">公司</text>
						<text @click="showSearchTag2(3)"
							:class="[{'searchTagClick':tag2 == 3},{'searchTag':tag2 != 3}]">团队</text>
						<text @click="showSearchTag2(4)"
							:class="[{'searchTagClick':tag2 == 4},{'searchTag':tag2 != 4}]">其他</text>
					</view>
					<view style="display: flex;flex-direction: row;;margin-top: 10px;">
						<view class="searchLable">所属类型：</view>
						<text @click="showSearchTag3(0)"
							:class="[{'searchTagClick':tag3 == 0},{'searchTag':tag3 != 0}]">不限</text>
						<text @click="showSearchTag3(1)"
							:class="[{'searchTagClick':tag3 == 1},{'searchTag':tag3 != 1}]">网站</text>
						<text @click="showSearchTag3(2)"
							:class="[{'searchTagClick':tag3 == 2},{'searchTag':tag3 != 2}]">应用</text>
						<text @click="showSearchTag3(3)"
							:class="[{'searchTagClick':tag3 == 3},{'searchTag':tag3 != 3}]">地推</text>
						<text @click="showSearchTag3(4)"
							:class="[{'searchTagClick':tag3 == 4},{'searchTag':tag3 != 4}]">QQ群</text>
					</view>
				</view>
				<view class="sendCp">
					<text class="fabu_btn" @click="addqd()">发布渠道信息</text>
					<text style="margin-left: 20px;">请务必发布真实可靠的推广信息</text>
				</view>
				<view class="main_content_center">
					<view class="contentTitle">
						<text class="app_name">渠道简介</text>
						<text class="app_price">推广量级</text>
						<text class="app_kind">渠道类型</text>
						<text class="app_jiesuan">推广方式</text>
						<text class="app_qq">QQ</text>
						<text class="app_qq">微信</text>
						<text class="app_qq">手机</text>
						<text class="app_ck">查看</text>
						<text class="app_caozuo">操作</text>
					</view>
					<template v-if="tjs.length>0">
						<view class="contentItem" v-for="qd in tjs">
							<view class="contentItem" @click="showDetail(qd)">
								<text class="app_name_tj">置顶:{{qd.QUDAO_QDJJ}}</text>
								<text class="app_price_tj">{{qd.QUDAO_QDLJ + "/月"}}</text>
								<text class="app_kind_tj">{{getQdlx(qd)}}</text>
								<text class="app_jiesuan_tj">{{getQdLeixing(qd)}}</text>
								<view class="app_qq">
									<img src="../../../static/qq.png" v-show="hasQQ(qd)"></img>
									<text v-show="!hasQQ(qd)">-</text>
								</view>
								<view class="app_qq">
									<img src="../../../static/wechat.png" v-show="hasWX(qd)"></img>
									<text v-show="!hasWX(qd)">-</text>
								</view>
								<view class="app_qq">
									<img src="../../../static/phone.png" v-show="hasPhone(qd)"></img>
									<text v-show="!hasPhone(qd)">-</text>
								</view>
								<text class="app_ck_tj">7444</text>
								<text class="app_caozuo_tj">点击查看</text>
							</view>
						</view>
					</template>
					<template v-for="qd in datas">
						<view class="contentItem" @click="showDetail(qd)">
							<text class="app_name">{{qd.QUDAO_QDJJ}}</text>
							<text class="app_price">{{qd.QUDAO_QDLJ + "/月"}}</text>
							<text class="app_kind">{{getqdlx(qd)}}</text>
							<text class="app_jiesuan">{{gettgfs(qd)}}</text>
							<view class="app_qq">
								<img src="../../../static/qq.png" v-show="hasQQ(qd)"></img>
								<text v-show="!hasQQ(qd)">-</text>
							</view>
							<view class="app_qq">
								<img src="../../../static/wechat.png" v-show="hasWX(qd)"></img>
								<text v-show="!hasWX(qd)">-</text>
							</view>
							<view class="app_qq">
								<img src="../../../static/phone.png" v-show="hasPhone(qd)"></img>
								<text v-show="!hasPhone(qd)">-</text>
							</view>
							<text class="app_ck">{{qd.chakan + "次"}}</text>
							<text class="app_caozuo">点击查看</text>
						</view>
					</template>

					<pageView ref="pageView"></pageView>

				</view>

			</view>
			<footerView></footerView>
		</view>
	</view>
</template>

<script>
	import headerView from '../header/Headerview.vue'
	import footerView from '../footer/Footer.vue'
	import adView from '../ads/MyAdView.vue'
	import pageView from '../../views/PageView.vue'
	export default {
		components: {
			headerView,
			adView,
			footerView,
			pageView
		},
		created() {
			//注册全局监听事件，搜索后更新界面数据
			uni.$on('showSearchData', (res) => {
					this.search(res);
				}),
				uni.$on(this.pageType, (page) => {
					this.isSearch = false;
					this.getqd(page);
				})
		},
		data() {
			return {

				isSearch: false,
				datas: [],
				tjs: [],
				tag1: 0,
				tag2: 0,
				tag3: 0,
				tglx: null,
				gslx: null,
				pageType: "qdPage",

			}
		},
		props: {
			msg: String
		},
		mounted() {
			this.$refs.pageView.setType(this.pageType);
			console.log("mountedmountedmounted", this.pageType)
			this.$nextTick(() => {
				this.getqd(1);
			});

		},
		onReady() {
			this.$refs.headerView.setIndex(2);
		},
		methods: {
			//跳转到产品详情页面
			showDetail(cp) {
				console.log("888888");
					uni.navigateTo({
						url: '../qd/qudaoDetail?id='+cp.QUDAO_ID,
						success: function(res) {
							res.eventChannel.emit('setQD', cp)

						}
					})


			},
			addqd() {
				uni.navigateTo({
					url: './addQd'
				})
			},
			hasQQ(qd) {
				if (this.isNull(qd.QUDAO_QQHM)) {
					return false;
				}
				return true;
			},
			hasWX(qd) {
				if (this.isNull(qd.QUDAO_WXHM)) {
					return false;
				}
				return true;
			},
			hasPhone(qd) {
				if (this.isNull(qd.QUDAO_SJHM)) {
					return false;
				}
				return true;
			},
			isNull(data) {
				if (data == null || data == "") {
					return true;
				}
				return false;
			},

			getqdlx(qd) {
				return this.$Utils.getQdlx(qd.QUDAO_SSLX);
			},
			gettgfs(qd) {
				return this.$Utils.gettgfs(qd.QUDAO_QDLX);
			},
			showSearchTag1(tag) {
				this.tag1 = tag;
				this.isSearch = true;
				if (tag == 0) {
					this.startPrice = null;
					this.endPrice = null;
				} else if (tag == 1) {
					this.startPrice = "1";
					this.endPrice = "500";
				} else if (tag == 2) {
					this.startPrice = "500";
					this.endPrice = "3000";
				} else if (tag == 3) {
					this.startPrice = "3000";
					this.endPrice = "8000";
				} else {
					this.startPrice = "8000";
					this.endPrice = "99999999999999999";
				}
				this.getqd(1);

			},
			showSearchTag2(tag) {
				this.isSearch = true;
				this.tag2 = tag;
				if (tag > 0) {
					this.gslx = tag;
				} else {
					this.gslx = null;
				}
				this.getqd(1);
			},
			showSearchTag3(tag) {
				this.isSearch = true;
				this.tag3 = tag;
				if (tag > 0) {
					this.tglx = tag;
				} else {
					this.tglx = null;
				}
				this.getqd(1);
			},
			async getqd(pageNum) {

				try {
					const res = await this.$getData({
						url: this.$apis.getQuDaos,
						data: {
							page: pageNum,
							startPrice: this.startPrice,
							endPrice: this.endPrice,
							gslx: this.gslx,
							tglx: this.tglx,
						}
					})
					this.datas = res.data.data;
					if (res.data.tj != null) {
						this.tjs = res.data.tj;
					}
					if (this.datas.length < 1 && this.tj.length < 1) {
						$Utils.showToast("没有数据");
					}


				} catch (e) {
					console.log("eee: ", e);
				}
			},
			async search(searchdata) {
				this.isSearch = true;
				try {
					const res = await this.$getData({
						url: this.$apis.searchChanPing,
						data: {
							page: 1,
							keyWord: searchdata
						}
					})
					this.datas = res.data.data;


				} catch (e) {
					console.log("eee: ", e);
				}

			}

		},
	}
</script>

<style>
	. {
		-webkit-box-sizing: border-box; //谷歌浏览器
		-moz-box-sizing: border-box; //火狐浏览器
		box-sizing: border-box;
		margin: 0px;
	}

	.mainContent {
		align-items: center;
		display: flex;
		justify-content: center;
		flex-direction: column;

	}

	.main_content_center {
		min-height: 800px;

	}

	.searchLable {
		font-weight: bold;
		color: #FB9E00;
		font-size: 18px;
		padding-left: 20px;
		padding-right: 10px;
		height: 30px;
		display: flex;
		width: 100px;
		margin-right: 10px;
		align-items: center;
	}


	.searchContent {
		justify-content: center;
		flex-direction: column;
		width: 1200px;
		display: flex;
		border: 1px solid #E5E5E5;
		height: 150px;
		margin-bottom: 5px;

	}

	.searchTag {
		display: flex;
		text-align: center;
		min-width: 70px;
		margin-left: 20px;
		justify-content: center;
		align-items: center;
		color: #FF8C00;

	}

	.footerPage {
		width: 1200px;

		border: 1px solid #E5E5E5;
		border-top: #FFFFFF;
		padding-bottom: 10px;
	}

	.searchTagClick {
		display: flex;
		text-align: center;
		min-width: 70px;
		margin-left: 20px;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		border-radius: 5px;
		background: #F99B15;
	}

	.sendCp {
		width: 1200px;
		display: flex;
		align-items: center;
	}

	.fabu_btn {
		background: #FB9E00;
		color: #FFFFFF;
		height: 35px;
		padding-left: 5px;
		padding-right: 5px;
		border-radius: 3px;
		text-align: center;
		align-items: center;
		display: flex;
	}

	.fabu_btn :hover {
		color: #FFFFFF;
		height: 35px;
		border-radius: 3px;
		text-align: center;
		align-items: center;
		display: flex;
		background: #FF8C00;
		cursor: pointer;
	}

	.contentTitle {

		margin-top: 5px;
		align-items: center;
		height: 40px;
		padding-left: 5px;
		padding-right: 5px;
		width: 1190px;
		display: flex;
		background: #E5E5E5;
	}

	.contentItem {
		justify-content: center;
		align-items: center;
		height: 50px;
		padding-left: 5px;
		padding-right: 5px;
		width: 1190px;
		display: flex;
		border-bottom: 1px solid #E5E5E5;

	}

	.contentItem_content {

		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		white-space: nowrap;
	}

	.contentItem image {
		width: 20px;
		height: 20px;
	}

	.app_name {
		white-space: nowrap;
		display: flex;
		overflow: hidden;
		color: #000000;
		display: flex;
		width: 380px;
	}

	.app_name_tj {
		white-space: nowrap;
		display: flex;
		overflow: hidden;
		color: #F99B15;
		display: flex;
		width: 380px;
	}

	.app_price {
		color: #333;
		justify-content: center;
		display: flex;
		white-space: nowrap;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_price_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		white-space: nowrap;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_kind {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_kind_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_qq {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_jiesuan {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_jiesuan_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_ck {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_ck_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_caozuo {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_caozuo_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}



	.click_a {
		background: #F99B15;
		color: #FFFFFF;
	}
</style>
